import {defineConfig} from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
import {dirname,resolve} from "node:path";
import { fileURLToPath } from 'node:url';
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig(({command, mode}) => {
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = dirname(__filename);
  
  return {
    plugins: [vue(),
      vueDevTools({
        // 工具->创建命令行启动器 将webstorm加入环境变量
        launchEditor:"webstorm"// webstorm 配置  默认vscode
      }),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver({
          importStyle: 'sass',
        })],
      }),
    ],
    server: {
      port: 8080,
      open: true,
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, "src"),
        '~@': resolve(__dirname, "src"),
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/css/index.scss" as *;`,
          api: 'modern-compiler',
          quietDeps: true,
        },
      },
    },
    build: {
      outDir: 'build',
      emptyOutDir: true,
      sourcemap: true,
      minify: true,
      watch: {
        // 启用监听模式
        include: ['src/**'],
        exclude: ['node_modules/**']
      },
      lib: {
        entry: 'src/index.js', // 库的入口文件
        name: 'FlowDesigner', // 库的全局变量名
        formats: ['es'],
        fileName: (format) => `flow-designer.js`, // 打包后的文件名
        cssFileName: "flow-designer"
      },
      rollupOptions: {
        // 确保外部化处理那些你不想打包进库的依赖
        external: ['vue', 'element-plus'],
        output: {
          exports: 'default',
          globals: {
            vue: 'Vue',
            'element-plus': 'ElementPlus',
          },
        },
        
      }
    }
  }
})
